<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-01 11:23:56
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.easy-quota-guarantee
  div.container.flex.column.justify-center
    div.title 您还没有先易额度，是否联系担保公司为您担保?
    div.quota.f3 小提示:您点击“确定联系”后，担保公司会与您联系，进行资信评估，资信评估通过后，担保公司会为您拨发相应的先易额度，您可使用先易额度易定别人的商品。
    div 
      span.template.mr2 您可以在线查看《易链值借贷合同》模板
      el-button(
        type="primary",
        size="small",
        @click="onQueryTemplate()") 点击查看 
    div.input-quota.flex 
      span.f4 您想要担保的金额是：
      el-input.w-input(v-model="money" placeholder="请输入" clearable)
      span.ml1.f4 元
  div.flex.justify-center.mt4.mb4
    el-button.btn(
      type="primary",
      size="large",
      plain,
      round,
      @click="onCancel()") 取消
    el-button.btn(
      type="primary",
      size="large",
      round,
      @click="onConfirm()") 确认
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();

const emits = defineEmits(["template", "cancel", "confirm"]);

const money = ref();

// 生命周期
onMounted(() => {});

// 查看模版
const onQueryTemplate = () => {
  emits("template");
};

// 取消
const onCancel = () => {
  emits("cancel");
};

// 确认
const onConfirm = () => {
  if (!money.value) {
    proxy.$message.error("请输入担保金额");
  }
  emits("confirm", money.value);
};
</script>

<style lang="stylus" scoped>
.easy-quota-guarantee
  .container
    padding: 22px 96px 0px 96px;
  .title
    margin: 32px 0px 22px 0px;
    font-weight: bold;
    font-size: 20px;
  .quota
    margin-bottom: 16px;
    color: #18BC9F;
  .template
    color: #2487E8;
  .status
    padding: 16px;
    background: #F5F5F5;
  .tip
    color: #E84026;
  .input-quota
    margin: 16px 0px;
  .w-input
    width: 280px;
  .btn
    width: 178px;
</style>
